<!-- pages/merchant/bills.vue -->
<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-title">账单管理</view>
			<view class="nav-btn" @tap="exportData">导出</view>
		</view>

		<!-- 收入统计 -->
		<view class="stat-card">
			<view class="stat-tabs">
				<view class="stat-tab" :class="{'active': statPeriod === 'today'}" @tap="changeStatPeriod('today')">今日
				</view>
				<view class="stat-tab" :class="{'active': statPeriod === 'week'}" @tap="changeStatPeriod('week')">本周
				</view>
				<view class="stat-tab" :class="{'active': statPeriod === 'month'}" @tap="changeStatPeriod('month')">本月
				</view>
				<view class="stat-tab" :class="{'active': statPeriod === 'year'}" @tap="changeStatPeriod('year')">今年
				</view>
			</view>

			<view class="stat-details">
				<view class="stat-item">
					<text class="stat-label">总收入</text>
					<text class="stat-value">¥{{ (Number(stats.fee) + Number(stats.refund)).toFixed(2) }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">订单数</text>
					<text class="stat-value">{{ stats.orders }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">退款金额</text>
					<text class="stat-value">¥{{ Math.abs(stats.refund) }}</text>
				</view>
			</view>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-section">
			<view class="filter-row">
				<view class="filter-label">日期范围：</view>
				<view class="date-picker" @tap="showDatePicker">
					<text class="date-text">{{ formatDate(dateRange.start) }} 至 {{ formatDate(dateRange.end) }}</text>
					<text class="iconfont icon-calendar">📅</text>
				</view>
			</view>

			<view class="filter-row">
				<view class="filter-item">
					<text class="filter-label">账单类型：</text>
					<picker @change="typeChange" :value="typeIndex" :range="typeOptions" range-key="label">
						<view class="picker">
							{{ typeOptions[typeIndex].label }}
						</view>
					</picker>
				</view>
			</view>

			<view class="filter-row">
				<view class="search-box">
					<text class="iconfont icon-search">🔍</text>
					<input type="text" v-model="searchKey" placeholder="搜索订单号" confirm-type="search"
						@confirm="searchBills" />
				</view>
				<view class="filter-btn" @tap="applyFilter">筛选</view>
				<view class="filter-btn reset-btn" @tap="resetFilter">重置</view>
			</view>
		</view>

		<!-- 账单列表 -->
		<view class="bill-list-header">
			<text class="col col-type">类型</text>
			<text class="col col-order">订单号/用户</text>
			<text class="col col-amount">金额</text>
			<text class="col col-time">时间</text>
		</view>

		<scroll-view scroll-y class="bill-list" @scrolltolower="loadMoreBills" v-if="billList.length > 0">
			<view class="bill-item" v-for="(bill, index) in billList" :key="index">
				<view class="col col-type">
					<view class="bill-type-tag type-refund" v-if="bill.record_type == 'refund'">
						{{ getTypeText(bill.record_type) }}
					</view>
					<view class="bill-type-tag type-deposit" v-else>
						{{ getTypeText(bill.record_type) }}
					</view>
				</view>

				<view class="col col-order">
					<text class="order-no">{{ bill.order_id || '-' }}</text>
					<text class="user-name">{{ bill.user.nickname }}</text>
				</view>

				<view class="col col-amount"
					:class="{income: bill.record_type === 'paid', refund: bill.record_type === 'refund'}">
					{{ bill.record_type === 'paid' ? '+' : '-' }}¥{{ bill.record_fee }}
				</view>

				<view class="col col-time" v-if="bill.record_type == 'refund'">
					<text class="bill-date">{{ formatDate(bill.orderInfo.end_time) }}</text>
					<text class="bill-time">{{ formatTime(bill.orderInfo.end_time) }}</text>
				</view>
				<view class="col col-time" v-else>
					<text class="bill-date">{{ formatDate(bill.create_time) }}</text>
					<text class="bill-time">{{ formatTime(bill.create_time) }}</text>
				</view>

			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMoreBills">
				<text>加载中...</text>
			</view>
			<view class="load-more" v-else>
				<text>没有更多账单了</text>
			</view>
		</scroll-view>

		<!-- 空账单提示 -->
		<view class="empty-tip" v-else>
			<image class="empty-image" src="/static/images/empty-data.png"></image>
			<text class="empty-text">暂无账单记录</text>
		</view>

		<!-- 日期选择弹窗 -->
		<uni-popup ref="datePopup" type="bottom">
			<view class="popup-content">
				<view class="popup-title">选择日期范围</view>
				<view class="date-range-picker">
					<view class="date-field">
						<text class="date-field-label">开始日期</text>
						<picker mode="date" :value="formatDateForPicker(dateRange.start)" @change="startDateChange">
							<view class="date-field-value">
								{{ formatDate(dateRange.start) }}
							</view>
						</picker>
					</view>
					<view class="date-field">
						<text class="date-field-label">结束日期</text>
						<picker mode="date" :value="formatDateForPicker(dateRange.end)" @change="endDateChange">
							<view class="date-field-value">
								{{ formatDate(dateRange.end) }}
							</view>
						</picker>
					</view>
				</view>
				<view class="date-shortcuts">
					<view class="shortcut-btn" @tap="applyDateRange('today')">今日</view>
					<view class="shortcut-btn" @tap="applyDateRange('yesterday')">昨日</view>
					<view class="shortcut-btn" @tap="applyDateRange('week')">本周</view>
					<view class="shortcut-btn" @tap="applyDateRange('month')">本月</view>
					<view class="shortcut-btn" @tap="applyDateRange('lastMonth')">上月</view>
				</view>
				<view class="popup-footer">
					<view class="popup-btn cancel-btn" @tap="closeDatePopup">取消</view>
					<view class="popup-btn confirm-btn" @tap="confirmDateRange">确定</view>
				</view>
			</view>
		</uni-popup>

		<!-- 账单详情弹窗 -->
		<uni-popup ref="detailPopup" type="bottom">
			<view class="popup-content detail-popup">
				<view class="popup-title">账单详情</view>
				<view class="detail-content" v-if="currentBill">
					<view class="detail-item">
						<text class="detail-label">账单类型</text>
						<text class="detail-value">{{ getTypeText(currentBill.record_type) }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">订单号</text>
						<text class="detail-value">{{ currentBill.order_no || '-' }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">用户信息</text>
						<text class="detail-value">{{ currentBill.nickname }} ({{ currentBill.phone || '-' }})</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">婴儿车编号</text>
						<text class="detail-value">{{ currentBill.baby_car_id || '-' }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">交易金额</text>
						<text class="detail-value"
							:class="{income: currentBill.record_type === 'paid', refund: currentBill.record_type === 'refund'}">
							{{ currentBill.record_type === 'paid' ? '+' : '-' }}¥{{ currentBill.amount }}
						</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">交易时间</text>
						<text class="detail-value">{{ formatDate(currentBill.create_time) }}
							{{ formatTime(currentBill.create_time) }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">交易渠道</text>
						<text class="detail-value">{{ currentBill.payment_channel || '-' }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">备注</text>
						<text class="detail-value">{{ currentBill.remark || '无' }}</text>
					</view>
				</view>
				<view class="popup-footer">
					<view class="popup-btn confirm-btn" @tap="closeDetailPopup">关闭</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getTodayTurnover,
		exportOrders
	} from '@/api/order.js'
	import {
		getRecord
	} from '@/api/record.js';

	export default {
		data() {
			// 获取当天的开始和结束
			const today = new Date();
			const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
			const endOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);

			return {
				// 账单统计
				statPeriod: 'today',
				stats: {
					fee: 0,
					orders: 0,
					refund: 0
				},
				today: {},
				week: {},
				month: {},
				year: {},
				total: {},

				// 筛选条件
				dateRange: {
					start: startOfToday.getTime(),
					end: endOfToday.getTime()
				},
				tempDateRange: {
					start: startOfToday.getTime(),
					end: endOfToday.getTime()
				},

				// 初始化账单类型选项
				typeOptions: [{
						value: '',
						label: '全部类型'
					},
					{
						value: 'paid',
						label: '支付费用'
					},
					{
						value: 'refund',
						label: '退还费用'
					}
				],
				typeIndex: 0,

				searchKey: '',

				// 账单列表
				billList: [],

				// 分页
				page: 1,
				pageSize: 15,
				hasMoreBills: true,
				total: 0,

				// 当前账单详情
				currentBill: null,

				// 筛选参数
				filterParams: {
					recordType: '',
					keyword: '', // 匹配API中的拼写
					startTime: '',
					endTime: '',
					page: 1,
					pageSize: 15
				}
			};
		},
		onLoad() {
			this.getStatistics();
			this.resetFilter(); // 重置筛选参数
			this.getBillList(); // 加载账单列表
			// this.exportData();
		},
		methods: {
			// 切换统计周期
			changeStatPeriod(period) {
				this.statPeriod = period;
				this.getStatistics();
			},

			// 获取统计数据
			async getStatistics() {
				try {
					const res = await getTodayTurnover();
					if (res.code === 200) {
						this.today = res.data.today || {
							fee: 0,
							orders: 0,
							refund: 0
						};
						this.week = res.data.week || {
							fee: 0,
							orders: 0,
							refund: 0
						};
						this.month = res.data.month || {
							fee: 0,
							orders: 0,
							refund: 0
						};
						this.year = res.data.year || {
							fee: 0,
							orders: 0,
							refund: 0
						};
						this.total = res.data.total || {
							fee: 0,
							orders: 0,
							refund: 0
						};

						switch (this.statPeriod) {
							case 'today':
								this.stats = this.today;
								break;
							case 'week':
								this.stats = this.week;
								break;
							case 'month':
								this.stats = this.month;
								break;
							case 'year':
								this.stats = this.year;
								break;
							default:
								this.stats = {
									fee: 0,
									orders: 0,
									refund: 0
								};
						}
					} else {
						uni.showToast({
							title: '获取统计数据失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取统计数据出错:', error);
					uni.showToast({
						title: '获取统计数据失败',
						icon: 'none'
					});
				}
			},

			// 获取账单列表
			async getBillList(loadMore = false) {
				if (loadMore) {
					this.filterParams.page++;
				} else {
					this.filterParams.page = 1;
					this.billList = [];
				}

				uni.showLoading({
					title: '加载中...'
				});

				try {
					// 修复日期格式问题：确保传递YYYY-MM-DD格式
					const params = {
						record_type: this.filterParams.recordType,
						order_no: this.filterParams.keyword,
						start_time: this.formatDateForAPI(this.dateRange.start),
						end_time: this.formatDateForAPI(this.dateRange.end),
						page: this.filterParams.page,
						page_size: this.filterParams.pageSize
					};
					console.log(params);
					const res = await getRecord(params);
					uni.hideLoading();
					if (res.code === 200) {
						const newList = res.data.list || [];
						this.total = res.data.total || 0;

						if (loadMore) {
							this.billList = [...this.billList, ...newList];
						} else {
							this.billList = newList;
						}

						// 检查是否还有更多数据
						this.hasMoreBills = this.billList.length < this.total;
					} else {
						uni.showToast({
							title: '获取账单列表失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					console.error('获取账单列表出错:', error);
					uni.showToast({
						title: '获取账单列表失败',
						icon: 'none'
					});
				}
			},

			// 加载更多账单
			loadMoreBills() {
				if (this.hasMoreBills) {
					this.getBillList(true);
				}
			},

			// 搜索账单
			searchBills() {
				// 使用搜索关键词作为统一的keyword参数
				this.filterParams.keyword = this.searchKey.trim();
				this.getBillList();
			},

			// 应用筛选
			applyFilter() {
				// 设置日期范围
				this.filterParams.startTime = this.formatDateForAPI(this.dateRange.start);
				this.filterParams.endTime = this.formatDateForAPI(this.dateRange.end);
				// 设置账单类型
				this.filterParams.recordType = this.typeOptions[this.typeIndex].value;
				// 搜索关键词处理
				this.filterParams.keyword = this.searchKey.trim();
				this.getBillList();
			},

			// 重置筛选
			resetFilter() {
				const today = new Date();
				const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
				const endOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);

				this.dateRange = {
					start: startOfToday.getTime(),
					end: endOfToday.getTime()
				};

				this.tempDateRange = {
					start: startOfToday.getTime(),
					end: endOfToday.getTime()
				};

				this.typeIndex = 0;
				this.searchKey = '';

				this.filterParams = {
					recordType: '',
					keyword: '',
					startTime: this.formatDateForAPI(startOfToday.getTime()),
					endTime: this.formatDateForAPI(endOfToday.getTime()),
					page: 1,
					pageSize: 15
				};

				this.getBillList();
			},

			// 导出数据
			async exportData() {
				try {
					const token = uni.getStorageSync("token");
					const platform = uni.getSystemInfoSync().platform.toLowerCase();

					// 显示加载状态
					uni.showLoading({
						title: '正在准备导出...',
						mask: true
					});

					if (platform === 'h5') {
						// H5 环境使用原生请求
						const res = await new Promise((resolve, reject) => {
							uni.request({
								url: "http://192.168.101.153:8000/babyCarMerchant/order/export",
								method: "GET",
								responseType: "arraybuffer", // 小程序环境中使用 arraybuffer 更稳定
								header: {
									'Authorization': token
								},
								success: (response) => resolve(response),
								fail: (error) => reject(error)
							});
						});

						uni.hideLoading();

						// 处理下载
						const blob = new Blob([res.data], {
							type: 'application/vnd.ms-excel'
						});
						const url = URL.createObjectURL(blob);
						const a = document.createElement('a');
						a.href = url;
						a.download = `订单导出_${new Date().toLocaleDateString()}.xlsx`;
						document.body.appendChild(a);
						a.click();
						document.body.removeChild(a);
						setTimeout(() => URL.revokeObjectURL(url), 1000);

						console.log("H5导出成功");

					} else if (platform === 'ios' || platform === 'android') {
						// APP环境处理
						const tempFilePath = `${uni.env.USER_DATA_PATH}/temp_export_${Date.now()}.xlsx`;

						const writeRes = await new Promise((resolve, reject) => {
							uni.downloadFile({
								url: "http://192.168.101.153:8000/babyCarMerchant/order/export",
								header: {
									'Authorization': token
								},
								filePath: tempFilePath,
								success: resolve,
								fail: reject
							});
						});

						uni.hideLoading();
						console.log("APP环境文件已保存到:", writeRes.filePath);

					} else {
						// 微信小程序专用下载方法
						this.downloadForWeixinMiniProgram(token);
					}

				} catch (error) {
					uni.hideLoading();
					console.error('导出失败:', error);
					uni.showToast({
						title: `导出失败: ${error?.errMsg || '系统错误'}`,
						icon: 'none',
						duration: 3000
					});
				}
			},

			// 微信小程序专用下载方法
			downloadForWeixinMiniProgram(token) {
				// 显示进度
				uni.showLoading({
					title: '下载中...0%'
				});

				// 创建下载任务
				const downloadTask = wx.downloadFile({
					url: "http://192.168.101.153:8000/babyCarMerchant/order/export",
					header: {
						'Authorization': token
					},
					success: res => {
						if (res.statusCode === 200) {
							uni.hideLoading();
							console.log("小程序下载成功, 临时路径:", res.tempFilePath);

							// 保存文件到永久位置
							wx.saveFile({
								tempFilePath: res.tempFilePath,
								success: saveRes => {
									const savedPath = saveRes.savedFilePath;
									console.log("文件已永久保存:", savedPath);

									wx.showModal({
										title: '导出成功',
										content: `文件已保存: ${savedPath}`,
										confirmText: '打开',
										success: modalRes => {
											if (modalRes.confirm) {
												wx.openDocument({
													filePath: savedPath,
													fileType: 'xlsx',
													success: () => console.log(
														'打开成功'),
													fail: err => {
														console.error(
															'打开失败:',
															err);
														wx.showToast({
															title: '打开失败，请前往文件管理器查看',
															icon: 'none'
														});
													}
												});
											}
										}
									});
								},
								fail: saveErr => {
									console.error('保存失败:', saveErr);
									wx.showModal({
										title: '保存失败',
										content: saveErr.errMsg,
										showCancel: false
									});
								}
							});
						} else {
							console.error('下载失败，状态码:', res.statusCode);
							wx.showModal({
								title: '下载失败',
								content: `服务器错误: ${res.statusCode}`,
								showCancel: false
							});
						}
					},
					fail: err => {
						uni.hideLoading();
						console.error('下载失败:', err);
						wx.showModal({
							title: '下载失败',
							content: err.errMsg,
							showCancel: false
						});
					}
				});

				// 监听下载进度
				downloadTask.onProgressUpdate(res => {
					uni.showLoading({
						title: `下载中...${res.progress}%`
					});
					console.log("下载进度:", res.progress, "%");
				});
			},

			// 显示日期选择弹窗
			showDatePicker() {
				// 临时日期范围，用于取消操作
				this.tempDateRange = {
					start: this.dateRange.start,
					end: this.dateRange.end
				};
				this.$refs.datePopup.open();
			},

			// 设置快捷日期范围
			setDateRange(rangeType) {
				const now = new Date();
				let start, end;

				switch (rangeType) {
					case 'today':
						start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
						end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
						break;
					case 'yesterday':
						start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
						end = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 23, 59, 59);
						break;
					case 'week':
						// 获取本周的星期一
						const day = now.getDay() || 7; // 如果是周日，getDay()返回0，我们需要将其转换为7
						start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - day + 1);
						end = new Date(now.getFullYear(), now.getMonth(), now.getDate() + (7 - day), 23, 59, 59);
						break;
					case 'month':
						start = new Date(now.getFullYear(), now.getMonth(), 1);
						end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
						break;
					case 'lastMonth':
						start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
						end = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59);
						break;
					default:
						return;
				}
				this.tempDateRange = {
					start: start.getTime(),
					end: end.getTime()
				};
			},

			// 新增 applyDateRange 方法
			applyDateRange(rangeType) {
				this.setDateRange(rangeType);
				this.dateRange = {
					...this.tempDateRange
				};
				this.closeDatePopup();
				this.applyFilter();
			},
			// 开始日期改变
			startDateChange(e) {
				const startDate = new Date(e.detail.value);
				this.tempDateRange.start = startDate.getTime();

				// 确保开始日期不晚于结束日期
				if (this.tempDateRange.start > this.tempDateRange.end) {
					this.tempDateRange.end = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(),
						23, 59, 59).getTime();
				}
			},

			// 结束日期改变
			endDateChange(e) {
				const endDate = new Date(e.detail.value);
				// 设置为当天的23:59:59
				this.tempDateRange.end = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(), 23, 59, 59)
					.getTime();

				// 确保结束日期不早于开始日期
				if (this.tempDateRange.end < this.tempDateRange.start) {
					this.tempDateRange.start = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate())
						.getTime();
				}
			},

			// 确认日期范围
			confirmDateRange() {
				this.dateRange = {
					...this.tempDateRange
				};
				this.closeDatePopup();
				this.applyFilter();
			},

			// 关闭日期选择弹窗
			closeDatePopup() {
				this.$refs.datePopup.close();
			},

			// 账单类型改变
			typeChange(e) {
				this.typeIndex = e.detail.value;
			},

			// 查看账单详情
			viewBillDetail(bill) {
				this.currentBill = {
					...bill
				};
				this.$refs.detailPopup.open();
			},

			// 关闭详情弹窗
			closeDetailPopup() {
				this.$refs.detailPopup.close();
			},

			// 获取类型文本
			getTypeText(type) {
				const typeMap = {
					'paid': '支付费用',
					'refund': '退还费用'
				};

				return typeMap[type] || '未知类型';
			},

			// 获取类型样式类名
			getTypeClass(type) {
				const classMap = {
					'paid': 'type-deposit',
					'refund': 'type-refund'
				};

				return classMap[type] || '';
			},

			// 格式化日期
			formatDate(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			},

			// 格式化日期为API格式 (YYYY-MM-DD)
			formatDateForAPI(timestamp) {
				return this.formatDate(timestamp);
			},

			// 格式化日期（用于日期选择器）
			formatDateForPicker(timestamp) {
				return this.formatDate(timestamp);
			},

			// 格式化时间
			formatTime(timestamp) {
				const date = new Date(timestamp);
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');

				return `${hour}:${minute}`;
			}
		}
	};
</script>

<style>
	.container {
		background-color: #F5F5F5;
		min-height: 100vh;
	}

	/* 导航栏 */
	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.nav-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
	}

	.nav-btn {
		font-size: 28rpx;
		color: #FFD100;
	}

	/* 统计卡片 */
	.stat-card {
		background-color: #FFFFFF;
		margin: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.stat-tabs {
		display: flex;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.stat-tab {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #666666;
		padding: 20rpx 0;
		position: relative;
	}

	.stat-tab.active {
		color: #FFD100;
		font-weight: bold;
	}

	.stat-tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #FFD100;
		border-radius: 2rpx;
	}

	.stat-details {
		display: flex;
		padding: 30rpx;
	}

	.stat-item {
		flex: 1;
		text-align: center;
	}

	.stat-label {
		display: block;
		font-size: 24rpx;
		color: #999999;
		margin-bottom: 10rpx;
	}

	.stat-value {
		display: block;
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
	}

	/* 筛选区域 */
	.filter-section {
		background-color: #FFFFFF;
		margin: 20rpx;
		border-radius: 12rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.filter-row {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.filter-row:last-child {
		margin-bottom: 0;
	}

	.filter-label {
		font-size: 26rpx;
		color: #666666;
		margin-right: 10rpx;
	}

	.date-picker {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #F5F5F5;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
	}

	.date-text {
		font-size: 26rpx;
		color: #333333;
	}

	.icon-calendar {
		font-size: 28rpx;
		color: #999999;
	}

	.filter-item {
		flex: 1;
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.filter-item:last-child {
		margin-right: 0;
	}

	.picker {
		flex: 1;
		font-size: 26rpx;
		color: #333333;
		background-color: #F5F5F5;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
	}

	.search-box {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #F5F5F5;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.icon-search {
		font-size: 28rpx;
		color: #999999;
		margin-right: 10rpx;
	}

	.search-box input {
		flex: 1;
		font-size: 26rpx;
		color: #333333;
	}

	.filter-btn {
		width: 120rpx;
		text-align: center;
		background-color: #FFD100;
		color: #333333;
		font-size: 26rpx;
		padding: 10rpx 0;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.reset-btn {
		background-color: #F5F5F5;
		color: #666666;
		margin-right: 0;
	}

	/* 账单列表 */
	.bill-list-header {
		display: flex;
		background-color: #F5F5F5;
		padding: 15rpx 20rpx;
		font-size: 24rpx;
		color: #999999;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.bill-list {
		height: calc(100vh - 560rpx);
		background-color: #FFFFFF;
	}

	.bill-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #EEEEEE;
		align-items: center;
	}

	.col {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.col-type {
		width: 160rpx;
	}

	.col-order {
		width: 240rpx;
	}

	.col-amount {
		width: 140rpx;
		text-align: right;
	}

	.col-status {
		width: 120rpx;
		text-align: center;
	}

	.col-time {
		flex: 1;
		text-align: center;
	}

	.col-action {
		width: 100rpx;
		text-align: center;
	}

	.bill-type-tag {
		display: inline-block;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
		font-size: 22rpx;
		text-align: center;
	}

	.type-rental {
		background-color: #E3F2FD;
		color: #2196F3;
	}

	.type-deposit {
		background-color: #E8F5E9;
		color: #4CAF50;
	}

	.type-refund {
		background-color: #FFF3E0;
		color: #FF9800;
	}

	.type-overtime {
		background-color: #FCE4EC;
		color: #E91E63;
	}

	.type-damage {
		background-color: #FFEBEE;
		color: #F44336;
	}

	.order-no {
		display: block;
		font-size: 24rpx;
		color: #333333;
		margin-bottom: 6rpx;
	}

	.user-name {
		display: block;
		font-size: 22rpx;
		color: #999999;
	}

	.income {
		color: #4CAF50;
	}

	.refund {
		color: #FF9800;
	}

	.status-tag {
		display: inline-block;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
		font-size: 22rpx;
	}

	.status-success {
		background-color: #E8F5E9;
		color: #4CAF50;
	}

	.status-pending {
		background-color: #FFF3E0;
		color: #FF9800;
	}

	.status-failed {
		background-color: #FFEBEE;
		color: #F44336;
	}

	.bill-date {
		display: block;
		font-size: 24rpx;
		color: #333333;
		margin-bottom: 6rpx;
	}

	.bill-time {
		display: block;
		font-size: 22rpx;
		color: #999999;
	}

	.action-btn {
		display: inline-block;
		padding: 6rpx 12rpx;
		border: 1rpx solid #FFD100;
		border-radius: 30rpx;
		font-size: 22rpx;
		color: #FFD100;
	}

	/* 加载更多 */
	.load-more {
		text-align: center;
		padding: 30rpx 0;
		font-size: 24rpx;
		color: #999999;
	}

	/* 空数据提示 */
	.empty-tip {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 30rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999999;
	}

	/* 弹窗样式 */
	.popup-content {
		background-color: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		padding: 30rpx;
		max-height: 80vh;
		overflow-y: auto;
	}

	.popup-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
		text-align: center;
	}

	.date-range-picker {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.date-field {
		width: 48%;
	}

	.date-field-label {
		display: block;
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 10rpx;
	}

	.date-field-value {
		background-color: #F5F5F5;
		padding: 15rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333333;
		text-align: center;
	}

	.date-shortcuts {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30rpx;
	}

	.shortcut-btn {
		width: 30%;
		text-align: center;
		background-color: #F5F5F5;
		color: #666666;
		font-size: 26rpx;
		padding: 10rpx 0;
		border-radius: 8rpx;
		margin-right: 5%;
		margin-bottom: 20rpx;
	}

	.shortcut-btn:nth-child(3n) {
		margin-right: 0;
	}

	.popup-footer {
		display: flex;
		justify-content: space-between;
	}

	.popup-btn {
		width: 48%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.cancel-btn {
		background-color: #F5F5F5;
		color: #666666;
	}

	.confirm-btn {
		background-color: #FFD100;
		color: #333333;
	}

	/* 账单详情弹窗 */
	.detail-popup {
		max-height: 90vh;
	}

	.detail-content {
		margin-bottom: 30rpx;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.detail-label {
		font-size: 28rpx;
		color: #666666;
		width: 30%;
	}

	.detail-value {
		font-size: 28rpx;
		color: #333333;
		text-align: right;
		width: 70%;
	}

	.detail-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.detail-btn {
		width: 48%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.detail-btn-primary {
		background-color: #FFD100;
		color: #333333;
	}

	.detail-btn-danger {
		background-color: #F44336;
		color: #FFFFFF;
	}
</style>